<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />
	<up-sticky :offset-top="offsetTop">
		<view class="overview">
			<view class="one">
				<image :src="theme?.bg?.account"  class="bg-icon"></image>
				<view class="two">
					<view class="flex items-center justify-center">
						<view class="left flex items-center justify-center flex-col">
							<view>{{ balance }}</view>
							<text>当前剩余</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tabs">
			<up-tabs
				:list="condition"
				@click="conditionCah"
				:scrollable="false"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:lineColor="theme?.themeColor"
			></up-tabs>
		</view>
	</up-sticky>
	<view class="container">
		<view class="fill">
			<view class="item flex items-center justify-between" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="intro">{{ item.intro }}</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="right flex items-end flex-col">
					<view>{{ item.fx ? item.fx : '+' }}{{ item.amount }}</view>
					<view class="time">余额：{{ item.front }}</view>
				</view>
			</view>
		</view>

		<up-empty v-if="!list.length" icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
	</view>
</template>

<script setup>
	import { ref, reactive, inject } from 'vue';
	import { port, goUrl } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	
	import { useThemeStore } from '@/stores/theme';
	
	const theme = useThemeStore();
	
	
	const list = ref([]);
	const title = ref('');
	const info = ref({});
	const balance = ref('0.00');
	const listRef = ref({
		page: 1,
		type: '',
		mode: 0
	});

	const url = ref('getAccountIndex');

	const condition = reactive([
		{ name: '全部', val: 0 },
		{ name: '收入', val: 1 },
		{ name: '支出', val: 2 }
	]);

	onLoad((e) => {
		if (e.type) {
			if (e.type == 'getWaitSettled' || e.type == 'getAlreadySettled') {
				url.value = e.type;
			} else {
				listRef.value.type = e.type;
			}
		}
		if (e.title) {
			title.value = e.title;
		}
	});

	function conditionCah(e) {
		listRef.value.mode = e.val;
		listRef.value.page = 1;
		list.value.length = 0;
		getAccountIndex();
	}

	const offsetTop = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		listRef.value.page = 1;
		list.value.length = 0;

		getAccountIndex();
	});

	onReachBottom(() => {
		getAccountIndex();
	});

	async function getAccountIndex() {
		let res = await port(url.value, listRef.value);
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
		balance.value = res.balance;
	}
</script>

<style scoped lang="scss">
	::v-deep page{
		background-color: #f4f5f8;
	}
	
	.tabs {
		background-color: #fff;
	}
	.overview {
		background: #ffffff;
		padding: 10rpx 30rpx;

		.one {
			position: relative;
			.bg-icon {
				width: 100%;
				height: 228rpx;
			}
		

			.two {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				.total {
					margin-top: 48rpx;
					> text {
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
					}
					> view {
						font-weight: 500;
						font-size: 26rpx;
						color: #ffffff;
						margin-left: 10rpx;
					}
				}
				.total-2 {
					margin-top: 38rpx;
					> text {
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						opacity: 0.7;
					}
					> view {
						font-weight: 500;
						font-size: 36rpx;
						color: #ffffff;
						margin-left: 0;
						margin-top: 10rpx;
					}
				}
				.left {
					> view {
						font-weight: 500;
						font-size: 56rpx;
						color: #ffffff;
					}
					> text {
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						opacity: 0.7;
						margin-top: 10rpx;
					}
				}
				.right {
					gap: 15rpx;
					.bt {
						font-weight: 500;
						font-size: 28rpx;
						color: #f81a2e;
						background: #ffffff;
						border-radius: 10rpx;
						padding: 10rpx 30rpx;
					}

					.border {
						color: #ffffff;
						background: none;
						border: 1rpx solid #ffffff;
						padding: 8rpx 30rpx;
					}
				}
			}
		}
	}

	.container {
		.fill {
			margin-top: 24rpx;
			padding: 0 30rpx;
			background-color: #fff;
			.item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eeeeee;
				&:last-child {
					border-bottom: none;
				}
				.left {
					.intro {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
				}
				.right {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
				.time {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					margin-top: 21rpx;
				}
			}
		}
	}
</style>
